<template>
  <div v-loading="loading">
    <div class="card">
      <!-- <div class="key-value" style="margin-bottom: 0">
        <el-button @click="$router.back()" type="primary" plain>返回</el-button>
      </div> -->
    </div>
    <div class="card m-t-20" v-if="details.status === 5 && details.appraiseStatus === 'N'">
      <!-- 待评价 -->
      <el-alert title="待评价" type="primary" :closable="false" description="您的案件已办结，请尽快评价"></el-alert>
    </div>
    <div class="card tips-box m-t-20" v-if="details.status === 13">
      <el-alert title="案件已退回" type="warning" :closable="false" description="投诉举报内容需要修改完善或需补正材料，请按照要求尽快予以完善，重新提交"></el-alert>
      <el-button @click="handleSubmit()" type="primary" size="small">重新提交</el-button>
    </div>
    <!-- 补正材料 -->
    <!-- subStatus 工单子状态：0-正常,1-撤回中,2-材料补正中,3-材料举证中,4-已终止,5-不受理申诉 -->
    <!--  -->
    <div class="card m-t-20" v-if="[0, 1, 3].includes(details.status) && details.subStatus === 2">
      <el-alert title="案件需补正材料" type="warning" :closable="false" description="请按照要求提交相关补正材料；"></el-alert>
      <moduleHead class="m-t-20" title="补正材料"></moduleHead>
      <el-form label-width="150px" :rules="correctRules" ref="correctForm" :model="correctForm">
        <el-form-item label="补正要求：">
          <el-input
            v-model="details.materialCorrectionDtoList[details.materialCorrectionDtoList.length - 1].correctRequirement"
            show-word-limit
            maxlength="1000"
            placeholder="请输入评价内容"
            type="textarea"
            disabled
            :autosize="{ minRows: 4 }"
            v-if="details.materialCorrectionDtoList && details.materialCorrectionDtoList.length"
          ></el-input>
        </el-form-item>
        <el-form-item label="补正材料：" prop="fileList">
          <upload-input :file-list="correctForm.fileList" tipsText="温馨提示: 请按照补正要求提供与投诉举报事项相关的资料，上传的附件大小不能超过100M，附件类型支持图片、文档、视频等格式文件。"></upload-input>
        </el-form-item>
        <el-form-item class="tac">
          <el-button :loading="uploading" @click="handleAddattachment" type="primary" size="small">提交补正材料</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 步骤栏 -->
    <div class="portals-card">
      <div class="navs">
        <step-nav class="step-nav-root" :arrived-idx="arrivedStepIdx" v-model="activedStepIdx">
          <step-item v-for="(item, idx) in navData" :key="item.num" :idx="idx" disabled>
            <step-item-svg :option="item" :actived="activedStepIdx === idx" :arrived="arrivedStepIdx >= idx" :passed="arrivedStepIdx > idx" :is-end="idx === navData.length - 1" :navType="navType" />
          </step-item>
        </step-nav>
      </div>
    </div>
    <div class="card" v-if="details.status === 13">
      <moduleHead styleName="warning" title="退回修改或补正信息"></moduleHead>
      <el-form class="key-value" label-width="150px">
        <el-form-item label="退回时间：">
          {{ details.backInfo.backTime }}
        </el-form-item>
        <el-form-item label="修改内容：">
          {{ details.backInfo.modifyContent }}
        </el-form-item>
        <el-form-item label="补正内容：">
          {{ details.backInfo.requireContent }}
        </el-form-item>
      </el-form>
    </div>

    <!-- 投诉举报人基本信息 -->
    <div class="card m-t-20">
      <div class="header">
        <moduleHead title="投诉举报人基本信息"></moduleHead>
        <!--        <div v-if="details.status < 4" class="time">-->
        <!--          <i class="img icon-clock"></i>-->
        <!--          <span>处理剩余时限：</span>-->
        <!--          <span v-if="details.status === 3" class="color-danger">{{ details.deadline | timeRemainingDHMS }}</span>-->
        <!--          <span class="color-danger">{{ details.currentStepDeadline | timeRemainingDHMS }}</span>-->
        <!--        </div>-->
        <!-- <el-button v-if="details.status === 6 && !details.repeatCheck" @click="reconsiderationDialog.visible = true" type="primary" plain size="small">复议</el-button> -->
      </div>
      <el-form class="key-value" label-width="150px" v-if="details.complainPersonMainInfo">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="联系人：">{{ details.complainPersonMainInfo.createUsername || details.complainPersonMainInfo.companyContactName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号：">
              {{ details.complainPersonMainInfo.idNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码：">{{ details.complainPersonMainInfo.mobile || "-" }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="联系邮箱：">
              {{ details.complainPersonMainInfo.email }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业名称：">
              {{ details.complainPersonMainInfo.companyName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="社会信用代码：">
              {{ details.complainPersonMainInfo.socialCreditNumber }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="通讯地址：">{{ details.companyAddress || details.address || "-" }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属行业：">{{ details.industryType || "-" }}</el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="是否授权：">
          {{ details.complainPersonMainInfo.auth === "true" ? "是" : "否" }}
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8" v-if="details.complainPersonMainInfo.auth === 'true'">
            <el-form-item label="委托人：">
              {{ details.complainPersonMainInfo.mandator }}
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="details.complainPersonMainInfo.auth === 'true'">
            <el-form-item label="联系电话：">
              {{ details.complainPersonMainInfo.mandatorPhone }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="身份证：">
          <upload-preview :file-list="details.clientIdCardList" btnType="text"></upload-preview>
        </el-form-item>
        <el-form-item label="委托授权书：" v-if="details.complainPersonMainInfo && details.complainPersonMainInfo.attachmentList.length">
          <upload-preview :file-list="details.complainPersonMainInfo.attachmentList" btnType="text"></upload-preview>
        </el-form-item>
      </el-form>
    </div>
    <!-- 投诉对象基本信息 -->
    <div class="card m-t-20">
      <div class="header">
        <moduleHead title="投诉对象基本信息"></moduleHead>
      </div>
      <el-form class="key-value" label-width="150px" v-if="details.complainant">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="投诉对象：">{{ details.complainant.addressDepartmentName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人：">{{ details.complainant.complaintContactName }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="联系电话：">{{ details.complainant.complaintContactMobile }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="事发地：">{{ details.complainant.address }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 反应问题基本信息 -->
    <div class="card m-t-20">
      <div class="header">
        <moduleHead title="反应问题基本信息"></moduleHead>
      </div>
      <el-form class="key-value" label-width="150px" v-if="details.questionMainInfo">
        <el-form-item label="案件名称：">
          {{ details.questionMainInfo.name }}
        </el-form-item>
        <el-form-item label="主要诉求：">
          <div v-html="txt2HTML(details.questionMainInfo.mainApply)"></div>
        </el-form-item>
        <el-form-item label="事实理由：">
          <div v-html="txt2HTML(details.questionMainInfo.factReason)"></div>
        </el-form-item>

        <el-form-item label="拖欠账款：">{{ details.questionMainInfo.isArrear ? "是" : "否" }}</el-form-item>
        <template v-if="details.questionMainInfo.isArrear">
          <el-row>
            <el-col :span="8">
              <el-form-item label="欠款金额：">{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.arrearsAmount | unitMoney }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同金额：">{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.contractAmount | unitMoney }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同协议名称：">{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.contractName }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签订时间：">{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.signTime }}</el-form-item>
            </el-col>
          </el-row>
          <!-- <el-form-item label="合同/协议编号：">{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.contractCode }}</el-form-item> -->
          <el-form-item label="主要违约条款：">
            <div>{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.defaultClause }}</div>
          </el-form-item>
        </template>
        <template v-if="details.questionMainInfo && details.questionMainInfo.wordAttachmentList.length">
          <el-form-item label="佐证材料："><upload-preview :file-list="details.questionMainInfo.wordAttachmentList" btnType="text"></upload-preview></el-form-item>
        </template>
      </el-form>
    </div>
    <!-- 补正信息 -->
    <div class="card" v-if="details.materialCorrectionDtoList?.length && details.materialCorrectionDtoList[0].workOrderAttachments.length">
      <div class="header">
        <moduleHead title="补正信息"></moduleHead>
      </div>
      <el-form class="key-value" label-width="150px">
        <div v-for="item in details.materialCorrectionDtoList" :key="item.id">
          <div class="correct-box" v-if="item.workOrderAttachments && item.workOrderAttachments.length">
            <el-form-item label="补正要求：">
              <div v-html="txt2HTML(item.correctRequirement)"></div>
            </el-form-item>
            <el-form-item label="补正时间：">{{ item.correctTime }}</el-form-item>
            <el-form-item label="补正文件：">
              <upload-preview :file-list="item.workOrderAttachments" btnType="text"></upload-preview>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 案件办理信息 -->
    <div class="card m-t-20">
      <div class="header">
        <moduleHead title="案件办理信息"></moduleHead>
      </div>
      <el-form class="key-value" label-width="150px" v-if="details.workOrderHandleInfo">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="案件编号：">
              {{ details.workOrderHandleInfo.workOrderNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="案件状态：">
              <span v-if="[0, 9].includes(details.status)">待受理</span>
              <span v-else-if="[1, 2, 21].includes(details.status)">已受理</span>
              <template v-else-if="details.status === 5">
                <span v-if="details.appraiseStatus === 'N'">待评价</span>
                <span v-else>已结案</span>
              </template>
              <span v-else-if="details.status === 6">不受理</span>
              <span v-else-if="details.status === 8">已终止</span>
              <span v-else-if="details.status === 10">已撤回</span>
              <span v-else-if="details.status === 12">待接收</span>
              <span v-else-if="details.status === 13">已退回</span>
              <span v-else-if="details.status === 14">放弃投诉举报</span>
              <span v-else>调查处理中</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="案件来源：">
              {{ details.workOrderHandleInfo.itemSource === 0 ? "网站" : details.workOrderHandleInfo.itemSource === 2 ? "手动录入" : "导入" }}
              <!-- 0网站1-12345导入2手动录入 -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="受理单位：">
              {{ details.workOrderHandleInfo.acceptDepartmentName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="承办单位：">
              {{ details.workOrderHandleInfo.processDepartmentName || "-" }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="案件归属地：">
              {{ details.workOrderHandleInfo.ownershipCase }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="督办案件：">
              {{ details.workOrderHandleInfo.supervisionCases }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="督办单位：">
              {{ details.workOrderHandleInfo.supervisionDepartmentName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="推送单位：">
          {{ details.pushDepartmentList.map((item) => item.departmentName).join("、") }}
        </el-form-item>
        <el-form-item label="抄送单位：">
          {{ details.copyDepartmentList.map((item) => item.departmentName).join("、") }}
        </el-form-item>
        <template v-if="acceptAttachmentList.length">
          <el-form-item label="案件受理通知书："><upload-preview :file-list="acceptAttachmentList" btnType="text"></upload-preview></el-form-item>
        </template>
      </el-form>
    </div>
    <!-- 不受理信息 -->
    <div v-if="details.status === 6" class="card">
      <div class="header">
        <moduleHead title="不受理信息"></moduleHead>
      </div>
      <el-form class="key-value" v-if="details.rejectWorkOrderDto" label-width="150px">
        <el-form-item label="不受理原因：">{{ details.rejectWorkOrderDto.notAcceptReason }}</el-form-item>
        <el-form-item label="不受理备注：">
          <div v-html="txt2HTML(details.rejectWorkOrderDto.comment || '-')"></div>
        </el-form-item>
        <template v-if="details.rejectWorkOrderDto && details.rejectWorkOrderDto.rejectAttachments">
          <el-form-item label="不予受理通知书：">
            <upload-preview :file-list="details.rejectWorkOrderDto.rejectAttachments" btnType="text"></upload-preview>
          </el-form-item>
        </template>
      </el-form>
    </div>
    <!-- 终止信息 -->
    <div v-if="details.status === 8" class="card">
      <div class="header">
        <moduleHead title="终止信息"></moduleHead>
      </div>
      <el-form class="key-value" v-if="details.overWorkOrderVo" label-width="120px">
        <el-form-item label="终止类型：">{{ details.overWorkOrderVo.reason }}</el-form-item>
        <el-form-item label="终止备注："><div v-html="txt2HTML(details.overWorkOrderVo.comment || '-')"></div></el-form-item>
        <!--  <template v-if="details.overWorkOrderVo.reportFile && details.overWorkOrderVo.reportFile.length">
          <el-form-item label="终止意见书："></el-form-item>
          <el-form-item label="" label-width="0">
            <upload-preview :file-list="details.overWorkOrderVo.reportFile" btnType="text"></upload-preview>
          </el-form-item>
        </template> -->
        <template v-if="details.overWorkOrderVo.reportNoticeFile && details.overWorkOrderVo.reportNoticeFile.length">
          <el-form-item label="终止通知书：">
            <upload-preview :file-list="details.overWorkOrderVo.reportNoticeFile" btnType="text"></upload-preview>
          </el-form-item>
        </template>
        <!--  <template v-if="details.overWorkOrderVo.attachmentList && details.overWorkOrderVo.attachmentList.length">
          <el-form-item label="附件："></el-form-item>
          <el-form-item label="" label-width="0">
            <upload-preview :file-list="details.overWorkOrderVo.attachmentList" btnType="text"></upload-preview>
          </el-form-item>
        </template> -->
      </el-form>
    </div>
    <!-- 结案信息 -->
    <div class="card m-t-20" v-if="details.workOrderSubmitFinishResult && details.status === 5">
      <div class="header">
        <moduleHead title="结案信息"></moduleHead>
      </div>
      <el-form class="key-value" label-width="150px">
        <el-form-item label="办结类型：">{{ details.workOrderSubmitFinishResult.reason }}</el-form-item>
        <el-form-item label="办结理由："><div v-html="txt2HTML(details.workOrderSubmitFinishResult.comment || '-')"></div></el-form-item>
        <!--  <el-form-item label="结案反馈：">
          {{ details.workOrderSubmitFinishResult.satisfactionLevel == "satisfaction" ? "满意" : details.workOrderSubmitFinishResult.satisfactionLevel == "common" ? "一般" : details.workOrderSubmitFinishResult.satisfactionLevel == "noSatisfaction" ? "不满意" : "" }}
        </el-form-item> -->
        <el-form-item label="结案反馈：">
          <div>{{ details.workOrderSubmitFinishResult.satisfactionLevel | workOrderAtisFactionLevel }}</div>
        </el-form-item>
        <!-- <template v-if="details.workOrderSubmitFinishResult.reportList && details.workOrderSubmitFinishResult.reportList.length">
          <el-form-item label="结案意见书："></el-form-item>
          <el-form-item label="" label-width="0">
            <upload-preview :file-list="details.workOrderSubmitFinishResult.reportList" btnType="text"></upload-preview>
          </el-form-item>
        </template> -->
        <template v-if="details.workOrderSubmitFinishResult.reportNoticeFile && details.workOrderSubmitFinishResult.reportNoticeFile.length">
          <el-form-item label="结案通知书："><upload-preview :file-list="details.workOrderSubmitFinishResult.reportNoticeFile" btnType="text"></upload-preview></el-form-item>
        </template>
        <!-- <template v-if="details.workOrderSubmitFinishResult.attachmentList && details.workOrderSubmitFinishResult.attachmentList.length">
          <el-form-item label="附件："></el-form-item>
          <el-form-item label="" label-width="0">
            <upload-preview :file-list="details.workOrderSubmitFinishResult.attachmentList" btnType="text"></upload-preview>
          </el-form-item>
        </template> -->
      </el-form>
    </div>
    <!-- 案件评价 -->
    <div class="card" v-if="[5].includes(details.status)">
      <div class="header">
        <moduleHead title="案件评价"></moduleHead>
      </div>
      <el-form class="key-value" ref="appraiseForm" :model="appraiseForm" :rules="appraiseFormRules" label-width="150px">
        <el-row :gutter="0">
          <el-col :span="9">
            <el-form-item label="整体满意度：" prop="satisfiedScore">
              <el-rate v-model="appraiseForm.satisfiedScore" :disabled="details.appraiseStatus === 'Y'"></el-rate>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="评价内容：" prop="comment">
          <el-input v-model="appraiseForm.comment" show-word-limit maxlength="1000" placeholder="请输入评价内容" type="textarea" class="input-text" :disabled="details.appraiseStatus === 'Y'"></el-input>
        </el-form-item>
      </el-form>
      <!--  <div class="btn-box" v-if="details.appraiseStatus === 'N'">
        <el-button @click="handleAppraise" :disabled="hasError" type="primary">确认无误，提交</el-button>
      </div> -->
    </div>

    <div class="footer-btn btn-box">
      <el-button v-if="[12].includes(details.status)" @click="handleCorrect" type="primary">申请修正</el-button>
      <el-button v-if="[5].includes(details.status) && details.appraiseStatus === 'N'" @click="handleAppraise" :disabled="hasError" type="primary">确认无误，提交</el-button>
      <el-button v-if="details.status === 6 && details.rejectReview === 'N'" @click="dialogFormVisible = true" type="primary">申请复核</el-button>
      <el-button v-if="details.status === 0" @click="recallDialog.visible = true" type="primary">撤回投诉举报案件</el-button>
      <el-button @click="$router.back()" type="primary" plain>返回</el-button>
    </div>
    <el-dialog title="申请复核" :visible.sync="dialogFormVisible">
      <div class="white-card">
        <el-form ref="rejectReviewForm" :model="rejectReviewForm" :rules="rejectReviewRules">
          <el-form-item label="理由" prop="comment">
            <el-input type="textarea" v-model="rejectReviewForm.comment" class="input-text" show-word-limit maxlength="100"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer-btn">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleRejectReview">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 撤回投诉举报案件 -->
    <recallDialog :visible.sync="recallDialog.visible" :workOrderId="details.id" @success="getDetails()"></recallDialog>
    <!-- 补正材料 -->
    <correctDialog :visible.sync="correctDialog.visible" :workOrderId="details.id" :correctInfo="correctInfo" @success="getDetails()"></correctDialog>
  </div>
</template>

<script>
import * as portalsApi from "@/api/portals";
import { getCMSUserInfo, postPortalsHeight } from "@/utils/common";
import recallDialog from "@/views/portals/components/recallDialog.vue";
import correctDialog from "@/views/portals/components/correctDialog.vue";
import * as mixins from "@/utils/mixins";
import { workOrderEventSource, workOrderStatus, timeRemaining, workOrderCreatorType, workOrderPublicStatus, workOrderPublicIntention, timeRemainingDHMS, txt2HTML, hourMinute, workOrderComplaintObjectType, unitMoney, workOrderAtisFactionLevel } from "@/utils/filters";
import * as validators from "@/utils/validators";
import StepNav from "@/components/StepNav/index.vue";
import StepItem from "@/components/StepNav/StepItem.vue";
import StepItemSvg from "@/components/StepNav/StepItemSvg.vue";
import uploadPreview from "@/components/uploadInput/uploadPreview.vue";
import uploadInput from "@/components/uploadInput/uploadInput.vue";

export default {
  name: "workOrderDetails",
  components: { recallDialog, correctDialog, StepNav, StepItem, StepItemSvg, uploadPreview, uploadInput },
  mixins: [mixins.form],
  filters: {
    workOrderEventSource,
    workOrderStatus,
    timeRemaining,
    workOrderCreatorType,
    workOrderPublicStatus,
    workOrderPublicIntention,
    timeRemainingDHMS,
    hourMinute,
    workOrderComplaintObjectType,
    unitMoney,
    workOrderAtisFactionLevel,
  },
  data() {
    return {
      hasError: true,
      loading: true,
      details: {},
      dialogFormVisible: false,
      rejectReviewForm: {
        comment: "",
      },
      rejectReviewRules: {
        comment: [{ required: true, message: "请填写" }],
      },
      correctForm: {
        fileList: [],
      },
      correctRules: {
        fileList: [{ required: true, message: "请上传补正材料" }, { validator: (rule, value, callback) => (value.length ? callback() : callback(new Error("请上传补正材料"))) }],
      },
      form: {
        comment: "",
      },
      replayObject: {},
      appraiseForm: {
        comment: "",
        processAvailableScore: 0,
        processEffectiveScore: 0,
        satisfiedScore: 0,
      },
      submitting: false,
      appraiseFormRules: {
        satisfiedScore: [{ required: true, message: "请填写整体满意度" }, { validator: validators.min(1, "请填写整体满意度") }],
      },
      canDelReplayObject: false,
      cmsUserInfo: {},
      recallDialog: {
        visible: false,
      },
      correctDialog: {
        visible: false,
      },
      fileList: [],
      uploading: false,
      navDataOnline: [],
      arrivedStepIdx: 0,
      activedStepIdx: 0,
      navType: "primary",
      correctInfo: {},
    };
  },
  computed: {
    navData() {
      let navList = [
        {
          num: 1,
          title: "待接收",
        },
        {
          num: 2,
          title: "待受理",
        },
        {
          num: 3,
          title: "已受理",
        },
        {
          num: 4,
          title: "调查处理中",
        },
        {
          num: 5,
          title: "待评价",
        },
        {
          num: 6,
          title: "已结案",
        },
      ];
      this.navType = "primary";
      if (this.details.status === 0 || this.details.status === 9) {
        this.activedStepIdx = 1;
      } else if ([1, 2].includes(this.details.status)) {
        this.activedStepIdx = 2;
      } else if (this.details.status === 5) {
        if (this.details.appraiseStatus === "Y") {
          this.activedStepIdx = 5;
        } else {
          this.activedStepIdx = 4;
        }
      } else if (this.details.status === 6) {
        navList = [
          {
            num: 1,
            title: "待接收",
          },
          {
            num: 2,
            title: "不受理",
          },
          {
            num: 3,
            title: "",
          },
          {
            num: 4,
            title: "",
          },
          {
            num: 5,
            title: "",
          },
          {
            num: 6,
            title: "",
          },
        ];
        this.navType = "danger";
        this.activedStepIdx = 1;
      } else if (this.details.status === 8) {
        navList[3].title = "已终止";
        this.navType = "danger";
        this.activedStepIdx = 3;
      } else if (this.details.status === 10) {
        this.activedStepIdx = 1;
        navList[1].title = "已撤回";
      } else if (this.details.status === 12) {
        this.activedStepIdx = 0;
      } else if (this.details.status === 13) {
        navList[0].title = "已退回";
        this.navType = "warning";
        this.activedStepIdx = 0;
      } else if (this.details.status === 14) {
        navList = [
          {
            num: 1,
            title: "待接收",
          },
          {
            num: 2,
            title: "放弃投诉举报",
          },
          {
            num: 3,
            title: "",
          },
          {
            num: 4,
            title: "",
          },
          {
            num: 5,
            title: "",
          },
          {
            num: 6,
            title: "",
          },
        ];
        this.activedStepIdx = 1;
        this.navType = "danger";
      } else {
        this.activedStepIdx = 3;
      }
      this.arrivedStepIdx = this.activedStepIdx;
      return navList;
    },
    acceptAttachmentList() {
      if (this.details.workOrderHandleInfo && this.details.workOrderHandleInfo.acceptAttachmentList.length) {
        return [this.details.workOrderHandleInfo.acceptAttachmentList[this.details.workOrderHandleInfo.acceptAttachmentList.length - 1]];
      }
      return [];
    },
  },
  watch: {
    appraiseForm: {
      handler() {
        this.hasError = validators.validate(this.appraiseForm, this.appraiseFormRules);
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.cmsUserInfo = getCMSUserInfo();
    this.getDetails();
  },
  methods: {
    txt2HTML,
    // 上传材料补正
    handleAddattachment() {
      this.validate("correctForm").then(() => {
        this.loading = true;
        portalsApi.workOrder
          .addAttachment({
            attachmentList: this.correctForm.fileList,
            createUserId: this.cmsUserInfo.userId,
            id: this.$route.query.id,
          })
          .then(() => {
            this.$message.success("上传材料补正成功");
            this.getDetails();
          })
          .finally(() => {
            this.uploading = false;
          });
      });
    },
    handleSubmit() {
      this.$router.push({ path: "/portals/createStep2", query: { workOrderId: this.details.id } });
    },
    handleRejectReview() {
      this.$refs.rejectReviewForm.validate((valid) => {
        if (valid) {
          portalsApi.workOrder
            .rejectReview({
              comment: this.rejectReviewForm.comment,
              workOrderNo: this.details.workOrderNo,
            })
            .then((res) => {
              this.dialogFormVisible = false;
              this.getDetails();
            })
            .finally(() => {});
        } else {
          return false;
        }
      });
    },
    getDetails() {
      this.loading = true;
      console.log(this.cmsUserInfo, "this.cmsUserInfo");
      portalsApi.workOrder
        .detailsOfMyWorkOrder(this.$route.query.id, {
          idNumber: this.cmsUserInfo.idNumber,
          socialCreditNumber: this.cmsUserInfo.socialCreditNumber ? this.cmsUserInfo.socialCreditNumber : "",
        })
        .then((res) => {
          this.details = res.result;
          if (this.details.materialCorrectionDtoList && this.details.materialCorrectionDtoList.length) {
            this.fileList = Array.isArray(this.details.materialCorrectionDtoList[this.details.materialCorrectionDtoList.length - 1].workOrderAttachments) ? this.details.materialCorrectionDtoList[this.details.materialCorrectionDtoList.length - 1].workOrderAttachments : [];
          }
          if (this.details.workOrderAppraise) {
            this.appraiseForm = Object.assign(this.appraiseForm, this.details.workOrderAppraise);
          }
          /* 补正材料弹框 */
          if ([0, 1, 3].includes(this.details.status) && this.details.subStatus === 2) {
            this.correctInfo = this.details.materialCorrectionDtoList[this.details.materialCorrectionDtoList.length - 1];
            this.correctDialog.visible = true;
          }
        })
        .then(() => this.$nextTick(postPortalsHeight))
        .finally(() => (this.loading = false));
    },
    handleAppraise() {
      this.validate("appraiseForm")
        .then(() => {
          this.loading = true;
          const form = { ...this.appraiseForm };
          form.createUser = this.cmsUserInfo.userId;
          form.createUsername = decodeURIComponent(this.cmsUserInfo.userName);
          form.workOrderId = this.$route.query.id;
          form.idNumber = this.cmsUserInfo.idNumber;
          form.socialCreditNumber = this.cmsUserInfo.socialCreditNumber;
          return portalsApi.workOrder.appraise(form);
        })
        .then(() => this.getDetails());
    },
    // 申请修正
    handleCorrect() {
      this.$confirm("案件已经提交处于待接收状态，确定申请修正？").then(() => {
        portalsApi.workOrder
          .applyAmendment({
            comment: "",
            workOrderNo: this.details.workOrderNo,
          })
          .then((res) => {
            this.$router.back();
          })
          .finally(() => {});
        // this.$route.query.workOrderId ? this.$router.back() : this.$router.push(this.backPath || "/portals/index");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  padding: 0;
  border-bottom: 0;
  margin-bottom: 10px;
  .module-head {
    flex: 1;
    margin-bottom: 0;
  }
}
/deep/.el-alert {
  .el-alert__content {
    display: flex;
    align-items: center;
    .el-alert__title {
      font-size: 16px;
    }
    .el-alert__description {
      margin-top: 0;
      margin-left: 10px;
      font-size: 14px;
    }
  }
  &.el-alert--primary {
    color: #2b65da;
    background-color: #ecf5ff;
  }
}
.tips-box {
  display: flex;
  align-items: center;
  .el-button {
    margin-left: 10px;
  }
}
/deep/.el-rate {
  height: 36px;
  line-height: 36px;
  .el-rate__item {
    .el-rate__icon {
      line-height: 36px;
    }
  }
}
.btn-box {
  // padding: 20px 0 10px 0;
  text-align: center;
}
.input-text {
  width: 100%;
  height: 150px;
}
.correct-box {
  border-bottom: 1px solid #e5e5e5;
}
.el-form-item__content {
  div {
    word-break: break-all;
  }
}
</style>
